import React from 'react';
import Grid from '../../components/table/grid';
import { injectIntl } from 'react-intl';
import moment from 'moment';
import {Form ,Row ,Col, Select ,Button,Input,Divider,Modal} from 'antd';
import axios from 'axios';
import qs from 'qs';
import { sessionManager } from '../../utils/sessionStorage';
const FormItem = Form.Item;
const createForm = Form.create;
const Option = Select.Option;
const confirm = Modal.confirm;
class equipmentManage extends React.Component {
	constructor(props) {
		super(props);
		this.columns = [
			{
				title: '电站名称',
				width: 100,
				key: 'chiefName',
				dataIndex:'chiefName',
				fixed: 'left',
			},
			{
				title: '设备编号',
				width: 150,
				key: 'account',
				dataIndex:'account',
				fixed: 'left',
			},
			{
				title: '设备型号',
				dataIndex: 'createTime',
				key: 'createTime',
				width: 150,
			},
			{
				title: '类型',
				dataIndex: 'companyName',
				key: 'companyName',
				width: 250,
			},
			{
				title: '额定功率（千瓦）',
				dataIndex: 'settlementPower',
				key: 'settlementPower',
				width: 150,
			},
			{
				title: '固件版本',
				width: 150,
				dataIndex: 'settlementElectric',
				key: 'settlementElectric',
			},
			{
				title: '操作',
				key: 'action',
				fixed: 'right',
				width: 300,
				render: (text, record) => {
					return (
						<span>
							<a onClick={() => this.goLink(text, record, 'merchantSettlementDetail')}>禁用</a>
							 <Divider type="vertical"/>
							<a onClick={() => this.goLink(text, record, 'merchantSettlementDetail')}>查看订单</a>
							 <Divider type="vertical"/>
							<a onClick={() => this.goLink(text, record, 'merchantSettlementDetail')}>查询日志</a>
							 <Divider type="vertical"/>
							<a onClick={() => this.showConfirm(text)}>远程升级</a>
							<Divider type="vertical"/>
							<a onClick={() => this.showConfirm(text)}>升级履历</a>
                    	</span>
					)
				}

			}
		];
		this.state = {
			refresh:0,
			params:{
			},
			updatedHistoryVisible:false,
			updateVisible:false
		};
	}
	statusChange(val,option){
		console.log('11111',val,option)
	};
	inquireBillList=(e)=>{
		e.preventDefault();
		this.props.form.validateFieldsAndScroll((errors, values) => {
			if (!!errors) {
				return;
			}
			console.info('Received values of form:',this.state.params,values);
			this.setState({
				params:Object.assign(this.state.params, values),
				refresh:this.state.refresh+1
			})
		});
	};
	exportAllLists(){
		console.log('导出列表')
	};
	freshGrid = () => {
		this.setState({
			refresh: this.state.refresh + 1
		});
	};
	showConfirm=(text)=>{
		confirm({
			title: '确认完成结算?',
			content: '',
			onOk:()=> {
				axios.get('/api/settlement/billSplit/completeSettlement',{ params:{id: text.id}}).then(res => {
					if(res&&res.data){
						this.freshGrid()
					}
				});
			},
			onCancel() {
				console.log('Cancel');
			},
		});
	}
	goLink = (text, record, link) => {
		sessionManager.clearItem('rowRecord');
		this.props.history.push({pathname: `/finance/${link}`,state: {rowRecord: text}});
	};
	render() {
		const {getFieldDecorator} = this.props.form;
		const token=(JSON.parse(sessionStorage.getItem("token"))||{}).token;
		let exportQs=`${qs.stringify(this.state.params)}&token=${token}`;
		return (
			<div>
				<Form layout="inline" onSubmit={this.inquireBillList} className="">
					<FormItem label="">
						{getFieldDecorator('userName', {
						})(<Input placeholder="请输入电站名称" />)}
					</FormItem>
					<FormItem label="">
						{getFieldDecorator('account', {
						})(<Input placeholder="请输入关键词(设备编号/型号/版本号等)" />)}
					</FormItem>
					<FormItem label="">
						{getFieldDecorator('status', {
							initialValue:''
						})(<Select
							allowClear={true}
							style={{ width: 160 }}
							onChange={this.statusChange}>
							<Option value="">全部类型</Option>
							<Option value="0">交流桩</Option>
							<Option value="1">直流桩</Option>
						</Select>)}
					</FormItem>
					<FormItem>
						<Button type="primary" htmlType="submit" >查询</Button>
					</FormItem>
				</Form>
				<Grid url="api/settlement/billSplit/settlementOrderBillList" columns={this.columns} refresh={this.state.refresh} params={this.state.params}/>
				<Modal
					title="远程升级"
					visible={this.state.updateVisible}
					footer={null}
					onCancel={this.handleCancel}>
					<Form layout="inline" onSubmit={this.adjustBill}>
						<FormItem label="固件型号">
							{getFieldDecorator('actualPower', {
								initialValue : ''
							})(<Select
								allowClear={true}
								onChange={this.statusChange}>
								<Option value="">全部类型</Option>
								<Option value="0">交流桩</Option>
								<Option value="1">直流桩</Option>
							</Select>)}
						</FormItem>
						<FormItem label="版本号">
						{getFieldDecorator('actualPower', {
							initialValue : ''
						})(<Select
							allowClear={true}
							onChange={this.statusChange}>
							<Option value="">全部类型</Option>
							<Option value="0">交流桩</Option>
							<Option value="1">直流桩</Option>
							</Select>)}
						</FormItem>
						<div className="form-footer">
							<Button type={'default'} onClick={this.handleCancel}>取消</Button>
							<Button type={'primary'} htmlType="submit" className="ok-btn">确认调整</Button>
						</div>
					</Form>
				</Modal>
				<Modal
					title="升级履历"
					visible={this.state.updatedHistoryVisible}
					footer={null}
					onCancel={this.handleCancel}>
					<Grid url="api/settlement/billSplit/settlementOrderBillList" columns={this.columns} refresh={this.state.refresh} params={this.state.params}/>
				</Modal>
			</div>
		)
	}
}

equipmentManage = createForm()(equipmentManage);
export default injectIntl(equipmentManage)